<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>慕家居</title>
    <meta name="keywords" content="家居" />
    <meta name="description" content="简洁、自然、人性化" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/css.css" />
  </head>
  <body>
    <!-- header -->
    <header>
      <div class="topbar">
        <div class="center-wrap">
          <p>服务热线：400-8888-888</p>
        </div>
      </div>
      <div class="navBar">
        <div class="center-wrap clearfix">
          <h1 style="display: none">慕家居</h1>
          <div class="main-pic">
            <img src="./image/logo.png" alt="" />
          </div>
          <nav>
            <ul>
              <li>
                <a href="">
                  <span class="iconfont">&#xe61b;</span>
                  <p>网站首页</p>
                </a>
              </li>
              <li>
                <a href="">
                  <span class="iconfont">&#xe650;</span>
                  <p>关于我们</p>
                </a>
              </li>
              <li>
                <a href="">
                  <span class="iconfont">&#xe8e6;</span>
                  <p>服务建设</p>
                </a>
              </li>
              <li>
                <a href="">
                  <span class="iconfont">&#xe604;</span>
                  <p>产品中心</p>
                </a>
              </li>
              <li>
                <a href="">
                  <span class="iconfont">&#xe78e;</span>
                  <p>服务大厅</p>
                </a>
              </li>
            </ul>
          </nav>
          <div class="search-box">
            <input type="text" placeholder="请输入搜索内容" />
            <a href="">
              <span class="iconfont">&#xe6e4;</span>
            </a>
          </div>
        </div>
      </div>
    </header>

    <!-- banner -->
    <section class="banner" id="banner">
      <ul class="carosel" id="carosel">
        <li>
          <a href="javascript:;"
            ><img class="banner-img" src="./image/banner01.png" alt=""
          /></a>
        </li>
        <li>
          <a href="javascript:;"
            ><img class="banner-img" src="./image/banner02.png" alt=""
          /></a>
        </li>
        <li>
          <a href="javascript:;"
            ><img class="banner-img" src="./image/banner03.png" alt=""
          /></a>
        </li>
      </ul>

      <div class="center-wrap">
        <ul id="circles">
          <li data-n="0" class="active"></li>
          <li data-n="1"></li>
          <li data-n="2"></li>
        </ul>
      </div>
    </section>
    <!-- liner-pics -->
    <section class="liner-pics content">
      <div class="center-wrap clearfix">
        <a class="left-btn" id="leftBtn">
          <img src="./image/prev.png" alt="" />
        </a>
        <div class="frame">
          <ul class="picList" id="picList">
            <li>
              <a href="">
                <div class="pic-box">
                  <img src="./image/product01.png" alt="" />
                </div>
                <div class="word-box">时尚卫生间墙面颜色 2029装饰设计</div>
              </a>
            </li>
            <li>
              <a href="">
                <div class="pic-box">
                  <img src="./image/product02.png" alt="" />
                </div>
                <div class="word-box">现代北欧风格厨房装 2029饰效果图</div>
              </a>
            </li>
            <li>
              <a href="">
                <div class="pic-box">
                  <img src="./image/product03.png" alt="" />
                </div>
                <div class="word-box">现代时尚北欧风格卧 2029装饰设计</div>
              </a>
            </li>
            <li>
              <a href="">
                <div class="pic-box">
                  <img src="./image/product04.png" alt="" />
                </div>
                <div class="word-box">130平简约现代北欧 2029装饰设计</div>
              </a>
            </li>
            <li>
              <a href="">
                <div class="pic-box">
                  <img src="./image/product05.png" alt="" />
                </div>
                <div class="word-box">现代北欧风格小客厅 2029装饰设计</div>
              </a>
            </li>
            <li>
              <a href="">
                <div class="pic-box">
                  <img src="./image/product06.png" alt="" />
                </div>
                <div class="word-box">时尚卫生间墙面颜色 2029装饰设计</div>
              </a>
            </li>
            <li>
              <a href="">
                <div class="pic-box">
                  <img src="./image/product07.png" alt="" />
                </div>
                <div class="word-box">现代北欧风格厨房装 2029饰效果图</div>
              </a>
            </li>
          </ul>
        </div>
        <a class="right-btn" id="rightBtn">
          <img src="./image/next.png" alt="" />
        </a>
      </div>
    </section>
    <!-- about-us -->
    <section class="about-us content">
      <div class="center-wrap">
        <div class="up">
          <div class="words">
            <p class="title">了解我们</p>
            <p class="desc">about us</p>
            <div class="short-line"></div>
          </div>
          <div class="line"></div>
        </div>
        <div class="down">
          <div class="left">
            <p>关于我们</p>
            <p>慕家居装饰材料有限公司</p>
            <div class="line"></div>
            <p>
              慕家居家居装修网北欧风格家 具图片专区,是国内海量全面的
              高质量北欧风格家具图片库…
            </p>
            <a href="">了解更多</a>
          </div>
          <div class="middle">
            <img src="./image/aboutus.png" alt="" />
          </div>
          <div class="right">
            <ul>
              <li>
                <a href="">
                  <div class="picbox">
                    <img src="./image/liuyan.png" alt="" />
                  </div>
                  <div class="wordbox">
                    <p>在线留言</p>
                    <p>on-line message</p>
                  </div>
                  <!-- <div class="left"></div> -->
                </a>
              </li>
              <li>
                <a href="">
                  <div class="picbox">
                    <img src="./image/guanggao.png" alt="" />
                  </div>
                  <div class="wordbox">
                    <p>广告经营</p>
                    <p>Advertising management</p>
                  </div>
                </a>
              </li>
              <li>
                <a href="">
                  <div class="picbox">
                    <img src="./image/wangluo.png" alt="" />
                  </div>
                  <div class="wordbox">
                    <p>网络咨询</p>
                    <p>Network consultation</p>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <!-- 精品推荐 -->
    <section class="jptj content">
      <div class="center-wrap">
        <div class="up clearfix">
          <p class="title">精品推荐</p>
          <p class="desc">Boutique recommendation</p>
          <div class="short-line"></div>
        </div>
        <div class="down">
          <a class="left-btn" id="jptjLeftBtn">
            <img src="./image/prev.png" alt="" />
          </a>
          <div class="frame">
            <ul id="jptjList">
              <li>
                <img src="./image/recommend1.png" alt="" />
                <div class="word-box">轻奢风格样板房客厅色彩搭配装修设计</div>
              </li>
              <li>
                <img src="./image/recommend2.png" alt="" />
                <div class="word-box">简约美式风格卧室衣柜设计</div>
              </li>
              <li>
                <img src="./image/recommend3.png" alt="" />
                <div class="word-box">轻奢风格L型厨房装修设计</div>
              </li>
              <li>
                <img src="./image/recommend4.png" alt="" />
                <div class="word-box">轻奢风格L型厨房装修设计</div>
              </li>
              <li>
                <img src="./image/recommend5.png" alt="" />
                <div class="word-box">轻奢风格L型厨房装修设计</div>
              </li>
            </ul>
          </div>
          <a class="right-btn" id="jptjRightBtn">
            <img src="./image/next.png" alt="" />
          </a>
        </div>
      </div>
    </section>
    <!-- 新闻中心 -->
    <section class="xwzx content">
      <div class="center-wrap">
        <div class="up clearfix">
          <div class="words">
            <p class="title">新闻中心</p>
            <p class="desc">press center</p>
            <div class="short-line"></div>
          </div>
          <!-- <p class="title">新闻中心</p>
          <p class="desc">press center</p> -->
          <div class="line"></div>
        </div>
        <div class="down">
          <ul>
            <li>
              <a href="">
                <div class="left">
                  <p>01</p>
                  <img src="./image/talk-bg.png" alt="" />
                </div>
                <div class="right">
                  <p>最新招标</p>
                  <p>
                    重庆业主要求：一居室的户型，想把阳台利用起来，改成一室一厅的户型，业主表示已经请朋友把以前的装修敲了，现在基本是毛坯的状态……
                  </p>
                </div>
              </a>
            </li>
            <li>
              <a href="">
                <div class="left">
                  <p>02</p>
                  <img src="./image/talk-bg.png" alt="" />
                </div>
                <div class="right">
                  <p>装修日记</p>
                  <p>
                    终于在北京四环里贷款买了套两居室二手房，还是很欣喜的，为了装好它，我可真是费了心了，毕竟是自己以后的小家，所以我真是没少操心……
                  </p>
                </div>
              </a>
            </li>
            <li>
              <a href="">
                <div class="left">
                  <p>03</p>
                  <img src="./image/talk-bg.png" alt="" />
                </div>
                <div class="right">
                  <p>装修百科</p>
                  <p>
                    买房之后，无论是毛坯房还是留下二手房，很多业主都会选择进行装修。装修可以为你带来一个你喜欢的房屋，同时满足你需要的生活方式……
                  </p>
                </div>
              </a>
            </li>
            <li>
              <a href="">
                <div class="left">
                  <p>04</p>
                  <img src="./image/talk-bg.png" alt="" />
                </div>
                <div class="right">
                  <p>热门搜索</p>
                  <p>
                    选择防盗门最重要的就是工艺质量：应特别注意检查有无焊接缺陷，诸如开焊、未焊、漏焊等现象。看门扇与门框的配合是否密实，间隙是否均匀……
                  </p>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <!-- 尾部区域 -->
    <footer>
      <div class="up">
        <div class="center-wrap">
          <div class="left">慕家居</div>
          <div class="right">
            <p>咨询电话：010-88888888</p>
            <p>公司网址：www.imooc.com</p>
            <p>邮箱：KEFU@IMOOC.com</p>
          </div>
        </div>
      </div>
      <div class="bottom">
        Copyright © 2020 imooc.com All Rights Reserved | 京ICP备
      </div>
    </footer>

    <script src="./js/carosel.js"></script>
    <script src="./js/piclist.js"></script>
    <script src="./js/jptjPicList.js"></script>
  </body>
</html>
